<template>
  <div class="center_bottom">
    <Echart :options="options" id="bottomLeftChart" class="echarts_bottom"></Echart>
  </div>
</template>

<script>
import { graphic } from "echarts";
export default {
  data() {
    return {
      options: {}
    };
  },
  props: {},
  watch: {
    "$store.state.setting.lastSEIASData.decarbonModel": {
      deep: true,
      handler(newValue, oldValue) {
        this.init(newValue);
      }
    }
  },
  mounted() {
    this.init(this.$store.state.setting.lastSEIASData.decarbonModel);
  },
  methods: {
    getStats(arr) {
      let stats = {};
      for (let i = 0; i < arr.length; i++) {
        let row = arr[i];
        for (let j = 0; j < row.length; j++) {
          if (row[j] !== "None") {
            let value = row[j];
            if (!stats[value]) {
              stats[value] = {
                count: 1,
                firstIndex: j,
                lastIndex: j
              };
            } else {
              stats[value].count++;
              stats[value].lastIndex = j;
            }
          }
        }
      }
      return stats;
    },

    init(newData) {
      let main = newData.fuelSolu.mainFuel.map((e, i) => {
        return newData.fuelSolu.mainRatio[i] == 0 ? "None" : e;
      });
      let dual = newData.fuelSolu.dualFuel.map((e, i) => {
        return newData.fuelSolu.dualRatio[i] == 0 ? "None" : e;
      });
      let arr = [
        main,
        dual,
        ...newData.techSolu.map(t => t.tech),
        ...newData.operSolu.map(t => t.oper)
      ];
      let stats = this.getStats(arr);
      let category = Object.keys(stats);
      let start = category.map(s => {
        return (stats[s].firstIndex + 2024).toString() + "-01-01";
      });
      let end = category.map(s => {
        return (stats[s].lastIndex + 2024).toString() + "-12-31";
      });

      this.options = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF"
          },
          formatter: function(params) {
            if (params[1].data && params[0].data) {
              return (
                `<div>${params[0].name}</div>` +
                `<div>START: ${params[1].data.split("-")[0]}</div>` +
                `<div>END  : ${params[0].data.split("-")[0]}</div>`
              );
            } else {
              return "";
            }
          },
          axisPointer: {
            type: "shadow"
          }
        },
        legend: {
          textStyle: {
            color: "#B4B4B4"
          },
          top: "0"
        },
        grid: {
          containLabel: true,
          left: "10px",
          right: "20px",
          bottom: "20px",
          top: "20px"
        },
        xAxis: {
          type: "time",
          axisLine: {
            lineStyle: {
              color: "#B4B4B4"
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true
          }
        },
        yAxis: {
          inverse: true,
          data: category,
          splitLine: { show: false },
          axisLine: {
            lineStyle: {
              color: "#B4B4B4"
            }
          }
        },
        series: [
          {
            name: "Duration",
            type: "bar",
            stack: "dura",
            barGap: "-100%",
            barWidth: 10,
            itemStyle: {
              borderRadius: 5,
              color: new graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(112,173,71,0.9)" }
              ])
            },
            data: end
          },
          {
            name: "Duration",
            type: "bar",
            stack: "dura",
            barGap: "-100%",
            barWidth: 10,
            itemStyle: {
              color: new graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(18,18,42,0.9)" }
              ])
            },
            z: 9,
            data: start
          }
        ]
      };
    }
  }
};
</script>
<style lang="scss" scoped>
.center_bottom {
  width: 100%;
  height: 100%;

  .echarts_bottom {
    width: 100%;
    height: 100%;
  }
}
</style>
